<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="utf-8">
	    <title>DesignPortfolio</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="">
	    <meta name="author" content="">

	    <!-- Styles -->
	    <link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' >
	    <link href="css/bootstrap.css" rel="stylesheet">
	    <link href="css/responsive.bootstrap.css" rel="stylesheet">
	    <link href="css/screen.css" rel="stylesheet">

	    <!--[if lt IE 9]>
	      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->

	    <!-- Faviocon and touch -->
	    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="#">
	    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="#">
	      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="#">
	                    <link rel="apple-touch-icon-precomposed" href="#">
	                                   <link rel="shortcut icon" href="img/favicon/favicon.ico">

	</head>
	<body>


		<!-- START SETTINGS BOX -->
			<div class="customPanel customPanelClosed">
				  <div class="customPanelOptions">
					    Site Color<br />
					    <div class="customPanelOptionsPickerButton customPanelOptionsPickerButtonSite"></div>
					    <div style="clear:both;"></div>
				  </div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerBackground"></div>
				  <div class="customPanelOptionsPicker customPanelOptionsPickerSite"></div>
				  <div class="customPanelButton"></div>
			</div>
			<!-- END SETTINGS BOX --> 

		<header>
			<div class="navTop">
				<div class="container">
					<div class="row">
						<nav class="span12">
							<ul class="clearfix unstyled pull-right">
								<li>
									<a href="#" title="twitter">Twitter</a>
								</li>
								<li>
									<a href="#" title="Flckr">Flckr</a>
								</li>
								<li>
									<a href="#" title="Facebook">Facebook</a>
								</li>
								<li>
									<a href="#" title="Google+">Google+</a>
								</li>
							</ul>
						</nav><!-- /nav -->
					</div><!-- /.row [TopNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.navTop -->

			<div class="mainNav">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="index-2.html" class="brand">Design Portfolio</a>
						</div>
						<nav class="span8 clearfix navbar-inner">
							<a class="btn btn-color menuMobile" data-toggle="collapse" data-target=".nav-collapse">menu</a>
						    <div class="nav-collapse collapse">
								<ul class="nav inline pull-right menu">
									<li>
										<a href="#">Home</a>
										<ul class="unstyled">
											<li><a href="index-2.html">Home default</a></li>
											<li><a href="home_1.html">Home var1</a></li>
											<li><a href="home_2.html">Home var2</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Pages</a>
										<ul class="unstyled">
											<li><a href="about_us.html">About us</a></li>
											<li><a href="service.html">Services</a></li>
											<li><a href="faq.html">Faq</a></li>
											<li><a href="features.html">Features</a></li>
											<li><a href="error_404.html">error 404</a></li>
											<li><a href="full_width.html">Full width</a></li>
											<li><a href="right_sidebar.html">Right sidebar</a></li>
											<li><a href="left_sidebar.html">Left sidebar</a></li>
										</ul>
									</li>
									<li>
										<a href="#">GALLERY</a>
										<ul class="unstyled">
											<li><a href="gallery_2.html">Gallery 2 columns</a></li>
											<li><a href="gallery_3.html">Gallery 3 columns</a></li>
											<li><a href="gallery_4.html">Gallery 4 columns</a></li>
										</ul>
									</li>
									<li class="active">
										<a href="#">PORTFOLIO</a>
										<ul class="unstyled">
											<li><a href="portfolio_2.html">Portfolio 2 columns</a></li>
											<li><a href="portfolio_3.html">Portfolio 3 columns</a></li>
											<li><a href="portfolio_4.html">Portfolio 4 columns</a></li>
										</ul>
									</li>
									<li>
										<a href="#">BLOG</a>
										<ul class="unstyled">
											<li><a href="blog_right_sidebar.html">Right sidebar</a></li>
											<li><a href="blog_left_sidebar.html">Left sidebar</a></li>
											<li><a href="blog.html">Full width</a></li>
											<li><a href="blog_single_post.html">Single post</a></li>
										</ul>
									</li>
									<li><a href="contacts.html">CONTACTS</a></li>
								</ul>
							</div>
						</nav><!-- /nav.span6 [MainNavigation] -->
					</div><!-- /.row [Logo, MainNavigation] -->
				</div><!-- /.container -->
			</div><!-- /.mainNav -->
		</header><!-- /header -->
		
		<div class="container-fluid topImage">
			<div class="container">
				<div class="row">
					<div class="span12">
						<h1>Photo</h1>
					</div>
				</div>
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
						  <li><a href="#">Home</a> <span class="divider">/</span></li>
						  <li class="active">Photo</li>
						</ul>
					</div>
				</div>
			</div><!-- /.container -->
		</div><!-- /.container-fluid [topImage] -->

		<div class="container-fluid darkBg showPhotoProject">
			<div class="container">
				<div class="row">
					<div id="myCarousel" class="carousel slid">
						  <!-- Carousel items -->
						<ul class="carousel-inner unstyled">
							<li class="active item">
								<figure class="span12">
									<img src="img/photo/photo1.jpg" alt="project photo">
								</figure>
							</li>
						    <li class="item">
						    	<figure class="span12">
									<img src="img/photo/photo2.jpg" alt="project photo">
								</figure>
						    </li>
						</ul>
  					</div>
				</div>
			</div>			
		</div><!--/.container-fluid  -->

		<div class="container-fluid grayBg photoControl">
			<div class="container">
				<div class="row">
					<div class="span8">
						<h2>jesse pinkman</h2>
					</div>
					<div class="span4">
						<ul class="inline pull-right unstyled">
							<li>
								<a href="#myCarousel" data-slide="prev">&#8592; prev project</a>
							</li>
							<li>/</li>
							<li>
								<a href="#myCarousel" data-slide="next">next project&#8594;</a>
							</li>
						</ul>
					</div>
				</div><!--/.row  -->
			</div><!--/.container  -->	
		</div><!--/.container-fluid  -->

		<div class="container">
			<div class="row">
				<div class="span8">
					<p>
						Praesent non eleifend dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum suscipit purus sed consequat. Pellentesque egestas ante non magna dignissim cursus. Nullam odio elit, imperdiet at pharetra at, blandit molestie turpis. Sed et cursus nisi. Nulla facilisi. Phasellus congue mollis ligula ut tempor. 
					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed sapien ullamcorper elit tempus consequat. Suspendisse leo arcu, volutpat vel bibendum non, varius ut sem. Donec nunc arcu, auctor faucibus aliquet sed, suscipit sit amet purus. Nam sit amet magna lacus. Nam eu ante sem, sit amet tincidunt nibh. 
					</p>
				</div>
				<div class="span4">
					<ul class="photoInfo unstyled">
						<li>
							<b>author</b>
							<a href="#">JANE JAMESON</a>
						</li>
						<li>
							<b>skills</b>
							HTTP / WORDPRESS / HTML
						</li>
						<li>
							<b>date</b>
							07 / DECEMBER
						</li>
						<li>
							<b>category</b>
							CAMERA, PHOTO
						</li>
						<li>
							<b>year</b>
							2013
						</li>
					</ul>
				</div>
			</div><!--/.row  -->
			<div class="row">
				<div class="span12">
					<h1>Related projects</h1>
					<ul class="row portfolioItems">
						<li class="span3">
							<figure>
								<a href="#" class="thumbnail">
									<img src="img/portfolio/item1.jpg" alt="project">
								</a>
								<figcaption>
									<h3><a href="#">Photo of morning grass</a></h3>
									<p>
										Class aptent taciti sociosqu ad litora torque
									</p>
								</figcaption>
							</figure>
						</li>
						<li class="span3">
							<figure>
								<a href="#" class="thumbnail">
									<img src="img/portfolio/item2.jpg" alt="project">
								</a>
								<figcaption>
									<h3><a href="#">Stylish coffee cup</a></h3>
									<p>
										Class aptent taciti sociosqu ad litora torque
									</p>
								</figcaption>
							</figure>
						</li>
						<li class="span3">
							<figure>
								<a href="#" class="thumbnail">
									<img src="img/portfolio/item3.jpg" alt="project">
								</a>
								<figcaption>
									<h3><a href="#">Burlesque</a></h3>
									<p>
										Class aptent taciti sociosqu ad litora torque
									</p>
								</figcaption>
							</figure>
						</li>
						<li class="span3">
							<figure>
								<a href="#" class="thumbnail">
									<img src="img/portfolio/item4.jpg" alt="project">
								</a>
								<figcaption>
									<h3><a href="#">Daredevil</a></h3>
									<p>
										Class aptent taciti sociosqu ad litora torque
									</p>
								</figcaption>
							</figure>
						</li>
					</ul>
				</div>
			</div><!--/.row  -->
		</div><!--/.container  -->

		

		<footer class="mainFooter">
			<div class="clients">
				<div class="container">
					<ul class="row inline">
						<li>
							<a href="#">
								<img src="img/partner/partner5.png" alt="themeforest">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner4.png" alt="audiojungle">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner3.png" alt="activeden">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner2.png" alt="graphicriver">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="img/partner/partner1.png" alt="codecanyon">
							</a>
						</li>
					</ul><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.clients -->

			<div class="footerWidgets">
				<div class="container">
					<div class="row">
						<div class="span4">
							<a href="#" class="brand">DesignPortfolio</a>
							<p>
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin massa vel odio gravida placerat. Suspendisse porta, nulla non eleifend vehicula, libero sapien luctus sapien, ut sodales augue velit vitae lacus. 
							</p>
						</div><!-- [footerMessage] -->
						<div class="span4">
							<h2>FLICKR PHOTOSTREAM</h2>
							<ul class="inline flickrImages" data-userid="30233972@N02" data-items="8">
												
							</ul><!-- /.row-fluid [flickrimages] -->
						</div><!-- [flickr] -->
						<div class="span4">
							<h2>RECENT POSTS</h2>
							<ul class="recentPosts">
								<li>
									<p>
										<a href="#">
											Pellentesque rhoncus nibh id nibh mollis Etiam aliquam, eros id facilisis 
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Donec volutpat, nisl quis luctu dap
										</a>
									</p>
								</li>
								<li>
									<p>
										<a href="#">
											Etiam faucibus, ligula nec blandit ornare, massa enim ultricies leo, eget porta dolor elit.
										</a>
									</p>
								</li>
							</ul>
						</div><!-- [recent posts] -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.footerWidgets -->

			<div class="copyRight">
				<div class="container">
					<div class="row">
						<div class="span7">
							<p>
								&copy; Copyright 2013. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
							</p>
						</div>
						<div class="span5 text-right">
							<p>
								Designed by Theme Designer. Developed by 960 Development
							</p>
						</div>
					</div><!-- /.row -->
				</div><!-- /.container -->
			</div><!-- /.copyright -->
		</footer><!-- /.footer [mainFooter] -->
	
	<!-- Scripts -->
	<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/settingsbox.js"></script>
	<script src="js/farbtastic/farbtastic.js"></script>
	<script src="js/jquery.prettyPhoto.js"></script>
	<script src="js/izotope.js"></script>
	<script src="js/option.js"></script>
	</body>
</html>